<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .datepicker {
            display: inline-block;
            position: relative;
            width: 280px;
            height: 30px;
        }

        .datepicker-box {
            width: 280px;
            height: 320px;
            position: absolute;
            left: 0;
            top: 30px;
        }

        .datepicker-box .datepicker-header {
            width: 280px;
            height: 40px;
            display: flex;
        }

        .datepicker-header .header-prev {
            flex: 1;
        }

        .datepicker-header .header-next {
            flex: 1;
        }

        .datepicker-header .header-content {
            flex: 3;
        }

        .datepicker-header div {
            text-align: center;
            line-height: 40px;
            height: 40px;
            background-color: black;
            color: burlywood;
        }

        .datepicker-title {
            width: 280px;
            height: 40px;
        }

        .datepicker-title .item,
        .datepicke-content .item {
            float: left;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            background-color: black;
            color: blanchedalmond;
        }
    </style>
    <script src="js/jquery-1.11.3.js"></script>
</head>

<body>

    开始时间 <input id="start" />

</body>
<script>

    Date.prototype.allDays = function () {//当时间的月份有多少天
        let tempDate = new Date("2000-01-01");//
        tempDate.setFullYear(this.getFullYear());//2021-10-31
        tempDate.setMonth(this.getMonth() + 1);//2021-11-31
        tempDate.setDate(0);//当前月的最后一天
        return tempDate.getDate();//当前月的最后一天是几号  当前月就有多少天
    }
    Date.prototype.prevDays = function () {//获取上一个月有多少天
        let tempDate = new Date("2000-01-01")//临时时间用01号
        tempDate.setFullYear(this.getFullYear());
        tempDate.setMonth(this.getMonth());//当前月的一号
        tempDate.setDate(0);
        return tempDate.getDate();
    }
    Date.prototype.firstDayWeek = function () {//当前月的第一天是星期几
        let tempDate = new Date("2000-01-01");//
        tempDate.setFullYear(this.getFullYear());//2021-01-01
        tempDate.setMonth(this.getMonth());//2021-10-01
        return tempDate.getDay();

    }




    $.fn.extend({
        datePicker: function () {
            this.parent = $("<div class='datepicker'>");
            $(this).wrap(this.parent);
            this.datePickerBox = $(`<div class="datepicker-box">`);
            $(this).parent().append(this.datePickerBox);
            this.datePickerBox.hide();

            this.datePickerBoxHeader = $(`<div class="datepicker-header">`);
            this.datePickerBox.append(this.datePickerBoxHeader);

            this.datePickerBoxHeaderPrevBtn = $(` <div class="header-prev">上</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderPrevBtn);

            this.datePickerBoxHeaderContext = $(`<div class="header-content">2021-10</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderContext);

            this.datePickerBoxHeaderNextBtn = $(`<div class="header-next">下</div>`);
            this.datePickerBoxHeader.append(this.datePickerBoxHeaderNextBtn);

            this.datePickerBox.append(` <div class="datepicker-title">
                <div class="item">一</div>
                <div class="item">二</div>
                <div class="item">三</div>
                <div class="item">四</div>
                <div class="item">五</div>
                <div class="item">六</div>
                <div class="item">日</div>
            </div>`);
            this.datePickerBoxContent = $(`<div class="datepicke-content">`);
            this.datePickerBox.append(this.datePickerBoxContent);
            //数据
            this.date = new Date();//默认时间

            var prevDays = this.date.prevDays();//上一个月有多少天
            var curentDays = this.date.allDays();//当前月有多少天
            var weekDays = this.date.firstDayWeek();//当前月第一天是星期几
            weekDays = weekDays == 0 ? 7 : weekDays;

            var nextDays = 42 - curentDays - weekDays + 2;

            //循环生成结构 分为三次 分别上 当 下

            this.datePickerBoxContent.html("");//清空
            for (let i = prevDays - weekDays + 2; i <= prevDays; i++) {
                let item = $(`<div class="item">${i}</div>`);
                this.datePickerBoxContent.append(item);
            }
            for (let i = 1; i <= curentDays; i++) {
                let item = $(`<div class="item">${i}</div>`);
                this.datePickerBoxContent.append(item);
            }
            for (let i = 1; i < nextDays; i++) {
                let item = $(`<div class="item">${i}</div>`);
                this.datePickerBoxContent.append(item);
            }

            let that =this;
            $(this).click((e) => {//文本框事件
                e.stopPropagation();
                this.datePickerBox.show();
            })
         
            $(document).click(function(e){ //页面事件
                e.stopPropagation();
                that.datePickerBox.hide();
            })

        }
    })


    $("#start").datePicker();



</script>

</html>